<template>
	<view style="display: flex;width: 100%;height: 100vh;flex-direction: column;justify-content: center;">
		<view style="padding:0 20px;">
			<view class="tn-flex tn-flex-row-center tn-text-bold ">{{pageTitle}}</view>
			<!-- 微信小程序 -->
			<tn-form :model="bindPhoneUserForm" ref="form" :errorType="['message']">
			    <tn-form-item :labelWidth="150" label="手机号:" prop="phone">
			        <div style="display: flex; align-items: center;" @click="getVerificationCode">
			            <tn-input v-model="bindPhoneUserForm.phone" style="flex: 1;" max-length="11"/>
			            <uni-button type="primary" @click="getVerificationCode" style="margin-left: 10px;" :class="{'disabled-button': cdTime > 0}">
			                获取验证码<span v-if="cdTime>0">({{cdTime}}s)</span>
			            </uni-button>
			        </div>
			    </tn-form-item>
			    
			    <tn-form-item :labelWidth="150" label="验证码:" prop="messagecode">
			        <tn-input v-model="bindPhoneUserForm.messagecode" max-length="8"/>
			    </tn-form-item>
			</tn-form>

			<view class="tn-flex tn-flex-row-center tn-margin-top">
				<view style="width: 100%;">
					<u-button shape="circle" type="success" 
						@click="decryptPhoneNumber">绑定手机号</u-button>
				</view>
			</view>
			<!-- <view style="text-align: center;margin-top: 30px;">
				<view @click="test()" style="border-radius: 20px; background-color: #FFC0CB; color: white; padding: 10px 20px; text-align: center;">
					测试
				</view>
			</view> -->
			<view style="text-align: center;margin-top: 30px;">
				<view @click="close()" style="border-radius: 20px; background-color: #007aff; color: white; padding: 10px 20px; text-align: center;">
					不绑定手机号
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Config from "../../utils/config";
	import {
		bindWeChatUserPhone
	} from "../../api/api";
	import store from "../../store";
	export default {
		data() {
			return {
				bindPhoneUserForm: {
					phone:"",
					messagecode:""
				},
				pageTitle:"",
				cdTime:0
			}
		},
		onLoad(options) {
			if(options.openRecharge == 'true'){
				this.pageTitle = '开启充值需绑定手机号';
			}else{
				this.pageTitle = '请绑定您的真实手机号';
			}
		},
		onShow() {
			
		},
		methods: {
			//发送验证码
			async getVerificationCode(){
				if(this.cdTime>0){
					return false;
				}
				console.log('发送验证码');
				let phone = this.bindPhoneUserForm.phone.trim();
				if(phone == ''){
					uni.showToast({
						icon:'none',
						title:'手机号为空'
					})
					return false;
				}
				const regex = /^1[3-9]\d{9}$/;
				if(!regex.test(phone)){
					uni.showToast({
						icon:'none',
						title:'手机号格式不对'
					})
					return false;
				}
				let res = await this.$api.sendMessageCode({
					phone:phone
				})
				if(!res){
					uni.showToast({
						icon:'none',
						title:'发送失败'
					})
				}else{
					this.cdTime = 60;
					const intervalId = setInterval(() => {
					    this.cdTime--;
					    if (this.cdTime<1) {
					        clearInterval(intervalId);
					    }
					}, 1000);
					uni.showToast({
						title:'发送成功'
					})
				}
			},
			//绑定手机号
			async decryptPhoneNumber(data) {
				let code = data.detail.code;
				let phone = this.bindPhoneUserForm.phone.trim();
				let messagecode = this.bindPhoneUserForm.messagecode.trim();
				if(phone == ''){
					uni.showToast({
						icon:'none',
						title:'手机号为空'
					})
					return false;
				}
				const regex = /^1[3-9]\d{9}$/;
				if(!regex.test(phone)){
					uni.showToast({
						icon:'none',
						title:'手机号格式不对'
					})
					return false;
				}
				if(messagecode == ''){
					uni.showToast({
						icon:'none',
						title:'请填写短信验证码'
					})
					return false;
				}
				let params = {
					appid: Config.appId,
					mobile: phone,
					messagecode:messagecode
				}
				let res = await this.$api.bindMoreFunPhone(params)
				this.bindDone(res);
			},
			bindDone(res){
				if(!res){
					uni.showToast({
						title:'手机验证失败',
						icon:"none",
						duration:2000
					})
					return false;
				}
				let userinfo = res.userinfo
				if (userinfo) {
					uni.setStorageSync("userInfo", userinfo);
					store.commit('$tStore', {
						name: 'vuex_user',
						value: userinfo
					});
					uni.showToast({
					    title: res.msg,
					    icon: 'success',
					    duration: 2000
					});
					setTimeout(()=>{
						uni.navigateBack(); 
					}, 2000); 
				}
			},
			close(){
				uni.navigateBack(); 
			}
		}
	}
</script>

<style>
	.disabled-button{
		color: gray;
		pointer-events: none; /* 禁止按钮点击事件，让按钮不可点击，可根据实际需求决定是否添加 */
	}
</style>